<!-- Based on Creative Agency Website From Scratch by Brad Traversy (2021)
see: https://www.youtube.com/watch?v=lvYnfMOUOJY -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Creative Agency</title>
</head>
<body>
<header>
<div class="logo"><h1>Creative Agency</h1></div>
<div class="toggle"></div>
<div class="navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="social-bar">
<ul>
<li>
<a href="https://facebook.com">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/facebook.png?raw=true"
target="_blank"
alt=""
/>
</a>
</li>
<li>
<a href="https://twitter.com">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/twitter.png?raw=true"
target="_blank"
alt=""
/>
</a>
</li>
<li>
<a href="https://instagram.com">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/instagram.png?raw=true"
target="_blank"
alt=""
/>
</a>
</li>
</ul>
<a href="mailto:you@email.com" class="email-icon">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/email.png?raw=true"
alt=""
/>
</a>
</div>
</div>
</header>
<!-- home -->
<section class="home" id="home">
<img
src="https://images.unsplash.com/photo-1507206130118-b5907f817163?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=768&q=80"
class="home-img"
alt=""
/>
<div class="home-content">
<h2>
We help <span class="highlight">you</span> to achieve <br />
<span class="highlight">your goals</span>
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo itaque
nam saepe vero voluptatem vel fuga a eaque earum alias ipsam
aspernatur culpa maxime laboriosam, impedit quae officiis consectetur
</p>
<a href="#services" class="btn">Get Started</a>
</div>
</section>
<!-- services -->
<section id="services">
<div class="title">
<h2>Services that we can help you with</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus
iusto molestias accusamus rem nobis est, et laborum harum doloremque
nemo non, minima quos totam labore maxime iste alias ut esse? Repellat
eaque reiciendis laboriosam corporis fuga vero ratione veritatis
numquam, libero magni voluptatum omnis molestiae officiis
exercitationem qui quidem nam.
</p>
</div>
<div class="services">
<div class="service">
<div class="icon">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/001.png?raw=true"
alt=""
/>
</div>
<h3>Design</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
</p>
</div>
<div class="service">
<div class="icon">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/002.png?raw=true"
alt=""
/>
</div>
<h3>Development</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
</p>
</div>
<div class="service">
<div class="icon">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/003.png?raw=true"
alt=""
/>
</div>
<h3>SEO</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
</p>
</div>
<div class="service">
<div class="icon">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/004.png?raw=true"
alt=""
/>
</div>
<h3>Marketing</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
</p>
</div>
<div class="service">
<div class="icon">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/005.png?raw=true"
alt=""
/>
</div>
<h3>App Development</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
</p>
</div>
<div class="service">
<div class="icon">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/006.png?raw=true"
alt=""
/>
</div>
<h3>Error Fixing</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum
omnis nemo sapiente in quidem sed dolores cumque! Ut, est aliquid!
</p>
</div>
</div>
</section>
<!-- work -->
<section id="work">
<div class="title">
<h1>Some of our finest work</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus
iusto molestias accusamus rem nobis est, et laborum harum doloremque
nemo non, minima quos totam labore maxime iste alias ut esse? Repellat
eaque reiciendis laboriosam corporis fuga vero ratione veritatis
numquam, libero magni voluptatum omnis molestiae officiis
exercitationem qui quidem nam.
</p>
</div>
<div class="portfolio">
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item1.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item2.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item3.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item4.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item5.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item6.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item7.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item8.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item9.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item10.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item11.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item12.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item13.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item14.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item15.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
<div class="item">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/portfolio-item16.jpg?raw=true"
alt=""
/>
<div class="action">
<a href="#">Launch</a>
</div>
</div>
</div>
</section>
<!-- contact -->
<section id="contact">
<div class="title">
<h2>Contact us</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus
iusto molestias accusamus rem nobis est, et laborum harum doloremque
nemo non, minima quos totam labore
</p>
</div>
<div class="contact">
<div class="contact-form">
<form>
<div class="row">
<div class="input50">
<input type="text" placeholder="First Name" />
</div>
<div class="input50">
<input type="text" placeholder="Last Name" />
</div>
</div>
<div class="row">
<div class="input50">
<input type="text" placeholder="Email" />
</div>
<div class="input50">
<input type="text" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="input100">
<textarea placeholder="Message"></textarea>
</div>
</div>
<div class="row">
<div class="input100">
<input type="submit" value="Send" />
</div>
</div>
</form>
</div>
<div class="contact-info">
<div class="info-box">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/address.png?raw=true"
class="contact-icon"
alt=""
/>
<div class="details">
<h4>Address</h4>
<p>28 Neon Tower, New York City, USA</p>
</div>
</div>
<div class="info-box">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/email.png?raw=true"
class="contact-icon"
alt=""
/>
<div class="details">
<h4>Email</h4>
<a href="mailto:anyone@example.com">anyone@example.com</a>
</div>
</div>
<div class="info-box">
<img
src="https://github.com/bradtraversy/creative-agency-website/blob/master/images/call.png?raw=true"
class="contact-icon"
alt=""
/>
<div class="details">
<h4>Call</h4>
<a href="tel:+19785555555">+1 978 555 5555</a>
</div>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>